<template>
    <div style="position: relative;display: inline-block;">
        <el-input v-model="currentValue" :placeholder="placeholder"
                  ref="input"
                  :size="size"
                  class="commonInput"
                  :clearable="clearable"
                  @focus="onFocus"
                  @input="onKeyUp"
                  @blur="onBlur"
                  @keyup.enter.native="getKeyword"
                  v-bind="$attrs"
                  v-on="$listeners"
                  :type="type">
        </el-input>
        <div v-if="searchLoading" class="select">
            <div class="inner"></div>
            <li v-for="item in searchOptions" class="remoteItem"
                @click="selectedItem(item.label)">
                {{item.label}}
            </li>
        </div>
    </div>
</template>
<script>

    import Service from '../../../services/common.service'

    export default {
        name: 'remoteInput',
        currentValue: String,
        oldValue: String,

        data() {
            return {
                currentValue: this.value,
                searchLoading: false,
                searchOptions: [],
                loading: false
            };
        },

        watch: {
            value(val, oldValue) {
                this.setCurrentValue(val);
            }
        },

        created: function () {

        },

        methods: {
            onFocus() {
//                this.showError = false;
            },
            onBlur() {
                const me = this;
                setTimeout(function () {
                    me.searchLoading = false;
                }, 200);
            },

            setCurrentValue(val) {
                this.currentValue = val;
            },

            handleClick(evt) {
                this.$emit('click', evt);
            },

            getKeyword() {
                this.$emit('search', this.currentValue);
            },

            selectedItem(key) {
                this.searchLoading = false;
                this.currentValue = key;
                console.log(this.currentValue)
                this.$emit('change', this.currentValue);
                this.$refs.input.focus();
            },

            onKeyUp() {
                const me = this;
                if(me.loading){
                    return;
                }
                me.loading = true;
                setTimeout(function(){
                    if (me.currentValue !== '') {
                        me.searchLoading = true;
                        Service.getKeyName(me.currentValue).then((res) => {
                            if (res.data.succeeded) {
                                let data = res.data.data;
                                if (data.length > me.showCount) {
                                    data = data.splice(0, me.showCount);
                                }
                                me.searchOptions = data.map(item => {
                                    return {value: item.keyWord, label: item.keyWord};
                                });
                                me.loading = false;
                                console.log(this.searchLoading)
                                console.log(this.searchOptions)
                            } else {
                                this['$message']({
                                    message: '查询失败！',
                                    type: 'error'
                                });
                            }
                        });
                    } else {
                        me.currentValue = '';
                        me.searchOptions = [];
                        this.searchLoading = false;
                    }
                },500);

                this.$emit('change', this.currentValue);
            }
        },

        props: {
            placeholder: {
                type: String,
                default: ''
            },
            value: {
                type: [String, Number],
            },
            type: {
                type: String,
                default: 'text'
            },
            size: {
                type: String,
                default: 'large'
            },
            clearable: {
                type: Boolean,
                default: true
            },
            showCount:{
                type: Number,
                default: 7
            }
        },
    }
</script>
<style lang="scss" scoped>
    .select {
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        background-color: #fff;
        -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 5px 0;
        position: absolute;
        top: 45px;
        left: 0;
        float: left;
        width: 80%;
        max-height: 300px;
        z-index: 1000;
        /*overflow-y: auto;*/
    }

    .inner {
        background-color: #FFF;
        width: 10px;
        height: 10px;
        border: 1px solid #DCDFE6;
        position: relative;
        left: 100px;
        top: -7px;
        transform: rotate(45deg);
        border-right: 0px;
        border-bottom: 0px;
        z-index: 1100;
    }

    .remoteItem {
        border-bottom: 1px solid #9e9e9e;
        background: #fff;
        height: 40px;
        padding: 5px;
        cursor: pointer;
        color: #000;

    }

    .remoteItem:hover {
        border-bottom: 1px solid #9e9e9e;
        background: #91d5ff;
        color: #fff;
        height: 40px;
        padding: 5px;
        cursor: pointer;
    }
</style>
